<template>
  <div class="detail_Combination" :style="{ '--wlborder': isFirst ? '#ffd1d1' : '', '--wlbg': isFirst ? '#fff' : '#f5f5f5' }">
    <div class="coupon" :class="[isFirst ? 'coupon_first' : '']" @click="toNewCoupon" v-if="infoData">
      <div class="coupon_l" v-if="infoData && infoData.coupon">
        <div class="coupon_l_detail van-ellipsis">
          <span class="small" v-if="infoData.coupon.discount_rule_str.is_price">{{ $i18n.t("money") }}</span>
          <span>{{ infoData.coupon.discount_rule_str.discount }}</span>
        </div>
        <span class="txt van-ellipsis">{{ infoData.coupon.discount_rule_str.desc }}</span>
      </div>
      <div class="line"></div>
      <div class="coupon_r" v-if="infoData.coupon">
        <div class="coupon_name van-ellipsis">{{infoData.coupon.coupon_name}}</div>
        <div class="tag">{{infoData.coupon.coupon_type_name}}</div>
        <div class="time" v-if="!isFirst">{{infoData.validity_period}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isFirst: {
      type: Boolean,
      default: false
    },
    infoData: {
      type: null
    }
  },
  data() {
    return {};
  },
  activated() {},
  methods: {
    toNewCoupon() {
      if (!this.isFirst) return;
      this.$router.push(this.fun.getUrl("new_coupon_detail_combination", { id: this.infoData.coupon_id }, {}));
    }
  }
};
</script>
<style lang="scss" scoped>
.detail_Combination {
  overflow: hidden;
  .coupon {
    height: 5.63rem;
    border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-shadow: 0rem 0.19rem 0.47rem 0.03rem #f0f0f1;
    background: #fff;
    .coupon_l {
      width: 6.78rem;
      height: 100%;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 0.63rem;
      box-sizing: border-box;
      .coupon_l_check {
        position: absolute;
        left: 0.63rem;
        top: 0.63rem;
      }
      .coupon_l_detail {
        font-weight: bold;
        font-size: 1.5rem;
        color: #ec2b2b;
        width: 100%;
        .small {
          font-size: 0.81rem;
        }
      }
      .txt {
        color: #ec2b2b;
        width: 100%;
      }
    }
    .line {
      margin: 0.53rem 0;
      border-left: 1px dashed #d6d6dc;
    }
    .coupon_r {
      flex: 1;
      padding-left: 0.72rem;
      padding-right: 0.72rem;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      .time {
        font-size: 0.75rem;
        color: #6e6e79;
        margin-top: 0.28rem;
      }
      .coupon_name {
        font-weight: bold;
        font-size: 0.88rem;
        color: #00001c;
        width: 100%;
        text-align: left;
      }
      .tag {
        margin-top: 0.5rem;
        padding: 0.19rem 0.31rem;
        border-radius: 0.31rem;
        background: #fdebeb;
        font-size: 0.75rem;
        color: #ec2b2b;
      }
    }
  }
  .coupon_first {
    background: linear-gradient(180deg, rgba(241, 83, 83, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 0.03rem solid #ffd1d1;
    box-shadow: 0rem;
  }
  .coupon::after {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    left: 6.56rem;
    top: -0.2rem;
    background: #000;
    border-radius: 50%;
    border: 0.03rem solid var(--wlborder);
    background: var(--wlbg);
  }
  .coupon::before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    left: 6.56rem;
    bottom: -0.2rem;
    background: #000;
    border-radius: 50%;
    border: 0.03rem solid var(--wlborder);
    background: var(--wlbg);
  }
}
</style>
